<template >
  <div class="login-container" style="background-image: url('/background.jpeg');background-size:100% 100%;">

    <!-- 注册弹窗 -->
    <el-dialog title="注册" :visible.sync="dialogFormVisibleReg">
      <el-form :model="formReg">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="formReg.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formReg.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="formReg.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="formReg.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="formReg.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleReg = false">取 消</el-button>
        <el-button type="primary" @click="enterErg">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 忘记密码弹框 -->
    <!-- <el-dialog title="重置密码" :visible.sync="dialogFormVisiblePass">
      <el-form :model="formPass">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblePass = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisiblePass = false">确 定</el-button>
      </div>
    </el-dialog> -->

    <div class="login" >
      <span class="span1">intool低代码开发平台</span>
      <br>
      <br>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            用户名:
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-input type="text" v-model="username" placeholder="请输入账号" style="width:300px"></el-input>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">密码:</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-input type="password" v-model="password" placeholder="请输入密码" style="width:300px"></el-input>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            &nbsp;
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button @click="rege">注册</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button @click="login()">登录</el-button>
          </div>
        </el-col>
        <!-- <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="text">忘记密码</el-button>
          </div>
        </el-col> -->
      </el-row>
    </div>
  </div>
</template>
  
<script>


export default {
  name: "Login",
  created() {

  },
  components: {},
  data() {
    return {
      username: '',
      password: '',
      dialogFormVisibleReg: false,
      formReg: {},
      formLabelWidth: '120px'

    };
  },
  methods: {
    login() {
      this.$http.post("/inter/user/login", {
        username: this.username,
        password: this.password
      }).then(res => {
        sessionStorage.clear()
        sessionStorage.setItem("token", res.token)
        sessionStorage.setItem("user", JSON.stringify(res.user))
        sessionStorage.setItem("role", JSON.stringify(res.role))
        sessionStorage.setItem("menuList", JSON.stringify(res.menuList))
        this.$router.push("/manage/home")
      })
    },
    rege(){
      this.dialogFormVisibleReg = true
      this.formReg={}
    },
    enterErg(){
      this.$http.post("/inter/user/save11",this.formReg).then(res=>{
        this.$notify({
          title: '注册成功',
          message: '',
          type: 'success'
        });
        this.dialogFormVisibleReg = false
      })
    }
  },
};
</script>

<style scoped>
.login {
  position: absolute;
  left: 30%;
  top: 27%;
}
.login-container {
    position: fixed;
    height: 100%;
    width: 100%;
  }

.span1 {
  font-size: 26px;
  margin-left: 10%;
}
</style>
  